<script lang="ts" setup>
import { delay, rpx, rpxh, } from '@/utils/myTools';
import { ref, h, resolveComponent, onMounted, reactive, toRaw } from "vue";
import { ElMessageBox, ElMessage, ElButton, TableV2FixedDir, TableV2SortOrder, ElTag } from "element-plus";
import { listone, debounce } from './api';
const value = ref()
const value1 = ref('')
const value2 = ref('')
const radio1 = ref(1)
const disabled = ref('4')
// tableDataOne数据
const tableDataOne: any = ref([]);
const p1 = new Promise((resolve, reject) => {
  let start = ref(0);
  let end = ref(3333);
  const queryone = ref({
    page: start.value,
    size: end.value,
  });
  const data = listone(toRaw(queryone.value));
  console.log('p1', toRaw(data))
  resolve(data)
})
const p2 = new Promise((resolve, reject) => {
  let start = ref(1);
  let end = ref(3333);
  const queryone = ref({
    page: start.value,
    size: end.value,
  });
  const data = listone(toRaw(queryone.value));
  console.log(data)
  resolve(data)
})
const p3 = new Promise((resolve, reject) => {
  let start = ref(0);
  let end = ref(3334);
  const queryone = ref({
    page: start.value,
    size: end.value,
  });
  const data = listone(toRaw(queryone.value));
  console.log(data)
  resolve(data)
})
Promise.all([p1, p2, p3]).then((value) => {
  const [data1, data2, data3]: any = value
  console.log(value)
  const d1 = [...data1.data.查询结果, ...data2.data.查询结果];
  tableDataOne.value = [...d1, ...data3.data.查询结果]
  console.log(tableDataOne.value)
}).catch((value) => {
  console.log('失败啦', value)
})
window.onclick = debounce(() => {

}, 2000)
const disable = (value: any) => {
  disabled.value = value
}
const dataone = [
  {
    value: '1',
    label: '单独1',
    disabled: false,
  },
]
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
//columns 是一个数组，里面的值为每一列的配置信息
const columns = [
  {
    key: "id",
    dataKey: "id",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
    title: "id",//显示在单元格表头的文本
    width: 50,//当前列的宽度，必须设置
    align: "center",
  },
  {
    key: "id",
    dataKey: "输送带名称",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
    title: "输送带名称",//显示在单元格表头的文本
    width: 100,//当前列的宽度，必须设置
    align: "center",
  },
  {
    key: "开始时间",
    dataKey: "开始时间",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填name
    title: "检测开始时间",
    width: 230,
    align: "center",

  },
  {
    key: "持续时间",
    dataKey: "持续时间",
    title: "检测时间",
    width: 100,
    align: "center",

  },
  {
    key: "终止原因",
    dataKey: "终止原因",
    title: "终止原因",
    width: 100,
    align: "center",

  },
  {
    key: "缺陷总数",
    dataKey: "缺陷总数",
    title: "缺陷总数",
    width: 70,
    align: "center",
  },
  {
    key: "断裂个数",
    dataKey: "断裂个数",
    title: "断裂个数",
    width: 70,
    align: "center",

  },
  {
    key: "异常个数",
    dataKey: "异常个数",
    title: "异常个数",
    width: 70,
    align: "center",

  },
  {
    key: "抽动个数",
    dataKey: "抽动个数",
    title: "抽动个数",
    width: 70,
    align: "center",
  },
  {
    key: "接头个数",
    dataKey: "接头个数",
    title: "接头个数",
    width: 70,
    align: "center",
  },
  {
    key: "需要观察的接头名称",
    dataKey: "需要观察的接头名称",
    title: "需要观察的接头",
    width: 130,
    align: "center",
  },
  {
    key: "需要修补的接头数",
    dataKey: "需要修补的接头数",
    title: "需要修补的接头",
    width: 160,
    align: "center",
  },
  {
    key: "检测报告",
    dataKey: "检测报告",
    title: "检测报告",
    width: 200,
    align: "center",
    cellRenderer: ({ cellData, row }) =>
      h(
        "div",
        null,
        [
          h(
            ElButton,
            { onClick: () => handleDelete(row), type: "danger", icon: "Delete" },
            { default: () => "打开" }
          ),
          h(
            ElButton,
            { onClick: () => handleOpen(row), type: "danger", icon: "Delete" },
            { default: () => "另存" }
          ),
        ]
      ),
  },
  {
    key: "图像数据",
    title: "图像数据",
    dataKey: "图像数据",
    width: 200,
    align: "center",
    cellRenderer: ({ cellData, row }) =>
      h(
        "div",
        null,
        [
          h(
            ElButton,
            { onClick: () => handleDelete(row), type: "danger", icon: "Delete" },
            { default: () => "打开" }
          ),
          h(
            ElButton,
            { onClick: () => handleOpen(row), type: "danger", icon: "Delete" },
            { default: () => "另存" }
          ),
        ]
      ),
  },
  {
    key: "操作",
    title: "操作",
    dataKey: "操作",
    width: 100,
    align: "center",
    cellRenderer: ({ cellData, row }) =>
      h(
        ElButton,
        { onClick: () => handleOpen(row), type: "danger", icon: "Delete" },
        { default: () => '删除' }
      )

  },
];
columns[13].fixed = TableV2FixedDir.RIGHT
columns[14].fixed = TableV2FixedDir.RIGHT
columns[12].fixed = TableV2FixedDir.RIGHT

// 打开另存
const handleOpen = () => {

}
// 升序降序
const options = [
  { label: '输送带名称', value: '输送带名称' },
  { label: 'id', value: 'id' },
  { label: '检测开始时间', value: '检测开始时间' },
  { label: '终止原因', value: '终止原因' },
  { label: '缺陷总数', value: '缺陷总数' },
  { label: '断裂个数', value: '断裂个数' },
  { label: '异常个数', value: '异常个数' },
  { label: '抽动个数', value: '抽动个数' },
  { label: '接头个数', value: '接头个数' },
  { label: '需要观察的接头', value: '需要观察的接头' },
  { label: '需要修补的街头', value: '需要修补的街头' },
  { label: '检测报告', value: '检测报告' },
  { label: '图像数据', value: '图像数据' },
]
var flag = true
const sort = async () => {
  if (flag) {
    const order = 'asc'
    const q = {
      sort: 当前选项.value,
      order: order
    }
    console.log(q)
    // tableDataOne.value = await Sort();
  } else {
    const order = 'desc'
    const q = {
      sort: 当前选项.value,
      order: order
    }
    console.log(q)
    tableDataOne.value = tableDataOne.value.sort((a: any, b: any) => toRaw(a.id - b.id))

  }
  flag = !flag
}
const 当前选项 = ref()
const namesort = () => {
}
//删除操作
const handleDelete = (data) => {
  ElMessageBox.confirm(`确定删除 ${data.rowData.name}?`, "提 示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableDataOne.value.splice(data.rowIndex, 1);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>
<template>
  <div class="flex">
    <div class="flex sort padding">
      <el-radio-group v-model="radio1" class="ml-4" @change="disable">
        <el-radio value="1" size="large">所有记录</el-radio>
        <el-radio value="2" size="large">最新记录</el-radio>
        <el-radio value="3" size="large">条件查询</el-radio>
      </el-radio-group>
      <div class="flex" style="display: flex;align-items: center;width: 550px;">
        排序:{{ 当前选项 }}
        <el-select v-model="当前选项" :style="{ width: rpx(200) }">
          <el-option v-for="o in options" :label="o.label" :value="o.value" />
        </el-select>
        &nbsp;
        <el-checkbox :disabled="当前选项 === undefined" @click="sort" label="升序" size="large" style="margin-left: 10px;" />
      </div>
    </div>
    <div class="padding flex sort">
      <div>
        输送带名称:<el-tree-select :style="{ width: rpx(200) }" check-strictly :render-after-expand="false" />
      </div>
      <div>
        时间范围:
        <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" />&nbsp;
        <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time" />
      </div>
      <el-checkbox label="有接头抽动" size="large" style="font-weight: bold;" />
      <el-checkbox label="有接头需要关注" size="large" style="font-weight: bold;" />
      <el-checkbox label="有接头需要修补" size="large" style="font-weight: bold;" />
      <el-button style="background-color: blue;color: azure;font-weight: bold;"
        :disabled="disabled == '1'">查询</el-button>
    </div>
    <div class="padding" :style="{ height: rpxh(600) }">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2 :columns="columns" :data="tableDataOne" :width="width" :height="height" />
        </template>
      </el-auto-resizer>
    </div>
    <div class="padding" style="margin-top: 10px">
      共
      <el-link type="primary" style="font-size: 20px">{{
        tableDataOne.length
      }}</el-link>
      条数据
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/main.scss";

.padding {
  padding: 0 rpx(20);
}
.sort {
  height: rpxh(100);
  // padding: 0 50px;
  gap: rpx(50);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}
</style>